<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <style type="text/css">
        #idData {color: red;border: solid;text-align: center;}
        a{text-decoration: none;}
    </style>
</head>
<body onLoad="goPage(1,10);">
<table id="idData" width="70%">

    <tr><td>1</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>2</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>3</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>4</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>5</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>6</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>7</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>8</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>9</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>10</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>11</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>12</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>13</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>14</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>15</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>16</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>17</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>18</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>19</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>20</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>21</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>22</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>23</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>24</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>25</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>26</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>27</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>28</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>29</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>30</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>31</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>32</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>33</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>34</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>35</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>36</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>37</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>38</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>39</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>40</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>41</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>42</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>43</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>45</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>46</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>47</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>48</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>49</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>50</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>51</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>52</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>53</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>55</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
    <tr><td>56</td><td>25</td><td>小鹿佩奇</td><td>外星人</td></tr>
</table>
<table width="60%" align="right">
    <tr><td><div id="barcon" name="barcon"></div></td></tr>
</table>
</body>
</html>

<script>
    /**
     * 分页函数
     * pno--页数
     * psize--每页显示记录数
     * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
     * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
     **/

    function goPage(pno,psize){
        // 父元素   table
        var itable = document.getElementById("idData");
        // 总共有多少子元素 //表格所有行数(所有记录数)
        var num = itable.rows.length;
        var totalPage = 0;//总页数  初始化页
        var pageSize = psize;//每页显示行数
        // 总共分几页
        num/pageSize > parseInt(num/pageSize)?totalPage=parseInt(num/pageSize)+1 : totalPage=parseInt(num/pageSize);
        var currentPage = pno;////当前页数
        var startRow = (currentPage - 1) * pageSize+1;//当前第几页
        var endRow = currentPage * pageSize;//当前页显示多少条数据
        endRow = (endRow > num)? num : endRow;
        // 遍历显示数据实现分页
        for(var i=1;i<(num+1);i++){
            var irow = itable.rows[i-1];
            i>=startRow && i<=endRow?irow.style.display = "block" : irow.style.display = "none";
        }
        var pageEnd = document.getElementById("pageEnd");


        var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";

        currentPage>1? tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>"+
             "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>" :
              tempStr += "首页"+ "<上一页>";
              
        currentPage<totalPage?tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>"+"<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>" : tempStr += "下一页>"+
                       "尾页";
        document.getElementById("barcon").innerHTML = tempStr;
    }
</script>
